<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品列表</title>

    <link rel="stylesheet" href="./node_modules/layui/dist/css/layui.css" />
    <link rel="stylesheet" href="./js/datatable/datatables.net-dt/css/jquery.dataTables.min.css" />

    <script type="text/javascript" src="./node_modules/layui/dist/layui.js"></script>
    <script type="text/javascript" src="./js/datatable/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="./js/datatable/datatables.net/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="./js/config.js"></script>
</head>
<body>
    <table id="infointro" class="display compact hover" style="width:100%;">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>库存</th>
                <th>单价</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>

    <script>
        $(document).ready(() => {
            let bindOp = new IntroListOperation();
            bindOp.bindInfoIntro("#infointro");

            $("#infointro").on("click", ".js-btn-plan", function() {
                let button = $(this);
                let id = $(button).attr('id');

                layer.prompt({
                    title: "预计入学日期",
                    formType: 0
                },
                function(indate, index) {
                    layer.close(index);

                    let formData = new FormData();

                    formData.append("id", id);
                    formData.append("pentertime", indate);

                    let myUrl = apiurl + "/reg/infointro/pdate";

                    $.ajax({
                        url: myUrl,
                        type: 'PUT',
                        cache: false,
                        data: formData,
                        processData: false,
                        contentType: false
                    }).done(function (res) {
                        layer.alert("保存成功！" + id);
                    }).fail(function (res) {
                        layer.alert("保存失败！" + id);
                    });

                });
            });

            $("#infointro").on("click", ".js-btn-detail", function() {
                let button = $(this);
                let id = $(button).attr('id');
                
                layer.open({
                    type: 2,
                    title: "详情",
                    shadeClose: true,
                    shade: false,
                    maxmin: false,
                    area: ['600px', '400px'],
                    content: "./detail2.html?id=" + id
                });
            });

            $("#infointro").on("click", ".js-btn-del", function() {
                let button = $(this);
                let id = $(button).attr('id');
                
                layer.confirm("确实要删除 id = " + id + " 的记录?", 
                    {
                        btn: ['是','否']
                    },
                    function() {
                        // yes
                        let myUrl = apiurl + "/reg/infointro/del";
                        let formData = new FormData();
                        formData.append("id", id);                        

                        $.ajax({
                            url: myUrl,
                            type: 'DELETE',
                            cache: false,
                            data: formData,
                            processData: false,
                            contentType: false
                        }).
                        done(function (res) {
                            let refreshUrl = apiurl + "/reg/infointro";
                            //let bindOp2 = new IntroListOperation();
                            bindOp.refreshTable("#infointro", refreshUrl);
                            layer.msg('完成删除操作 ' + res, {icon: 0});
                        }).
                        fail(function (res) {
                            layer.msg('删除操作失败', {icon: 0});
                        });
                    },
                    function() {
                        // no
                    }
                );
            });
        });

        function IntroListOperation() {
            this.bindInfoIntro = function(tableid) {
                var myUrl = apiurl + "/products";
                console.log(myUrl)

                $.ajax({
                    type: "GET",
    				url: myUrl,
	    			dataType: "json",
                    success: function(myData) {
                        if ($.fn.DataTable.isDataTable(tableid) == false) {
                            $(tableid).dataTable({
                                "aaData": myData,
                                "aoColumns": [
                                    {
                                        "mData": "product_id",
                                        "width": 40
                                    },
                                    {
                                        "mData": "name",
                                        "width": 50
                                    },
                                    {
                                        "mData": "quantity_in_stock",
                                        "width": 70
                                    },
                                    {
                                        "mData": "unit_price",
                                        "width": 80
                                    },
                                    {
                                        "mData": "id",
                                        "render": function (data, type, row, meta) {
                                            if (type === "display") {
                                                data = "<button class='js-btn-detail layui-btn layui-btn-xs' id='" + data + "'>详情</button>" + 
                                                       "<button class='js-btn-del layui-btn layui-btn-xs' id='" + data + "'>删除</button>"
                                            }
                                            return data;
                                        },
                                        "width": 70
                                    }
                                ],
                                "language": {
                                    url: "./js/datatable/Chinese.json"
                                },
                                "bPaginate": true,
                                "bInfo": true,
                                "filter": true,
                                'columnDefs': [
                                    {
                                        'targets': 0,
                                        'className': 'dt-body-center'
                                    },
                                    {
                                        'targets': 2,
                                        'searchable': false,
                                        'orderable': false,
                                        'className': 'dt-body-right'
                                    },
                                    {
                                        'targets': 3,
                                        'searchable': false,
                                        'orderable': false,
                                        'className': 'dt-body-right'
                                    },
                                    {
                                        'targets': 4,
                                        'searchable': false,
                                        'orderable': false,
                                        'className': 'dt-body-center'
                                    }
                                ]

                            });
                        }
                        else {
                            this.refreshTable(tableid, myUrl);
                        }
		    		}
                }).
                done().fail(function() {
                    console.log("Bind table failed.")
                }, 2000);

            }

            this.refreshTable = function (tableid, url) {
                $.getJSON(url, null, function (json) {
                    table = $(tableid).dataTable();
                    oSettings = table.fnSettings();

                    table.fnClearTable(this);

                    var myTable = $(tableid).DataTable();
                    myTable.clear().rows.add(json).draw();
                });
            }
        }
    </script>
</body>
</html>